<template>
	<view class="content">
		<view class="bgc"><view class="bgc1"></view></view>
		<swiper :interval="3000"  :current='current' :duration="100" style="height: 100vh !important; overflow: scroll;">
			<swiper-item v-for="(item, index) in data" :key="index">
				<view class="swiper-item" style="height: 100vh;">
					<view class="info" :style="{ 'background-image': 'url(' + item.url + ')' }">
						<view class="list">{{ item.name || '' }}</view>
						<view class="list1">所有车辆{{ item.discount || '' }}折优惠</view>
						<view class="list2">
							<view class="ew1">达成条件：{{ item.recharge }}</view>
							<view class="ew2" @click="certification">
								<image src="../../../static/home/my7.png" mode="" style="width: 34rpx ; height: 24rpx;"></image>
								<text>认证 ></text>
							</view>
						</view>
					</view>
					

				
					
					<view class="info1 " v-for="(item1, index1) in item.interests" :key="index1">
						<view class="data1">
							<image v-if="item1.status == 1" src="../../../static/home/duihao1.png" mode=""></image>
							<image v-else src="../../../static/home/duihao.png" mode=""></image>

							<text v-if="item1.status == 1" style="color: #C59B5B !important; font-size: 28rpx;">{{ item1.name }}</text>
							<text v-else>{{ item1.name }}</text>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>

		<view class="" style="display: flex; justify-content: space-between; margin: 20px 0 ;">
			<text style="display: blok; width: 100%;  color: #CCCCCC; text-align: center;">更多权益陆续开发中</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			current: 0,
			uid: 0,
			level: 0,
			
			
			show: false,
			data: [],
			list: [
				// 尊享卡
				'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/%E5%B0%8A%E4%BA%AB%E5%8D%A1%403x.png',
				// 白银卡
				'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/%E7%99%BD%E9%93%B6%E5%8D%A1%403x.png',
				// 黄金卡
				'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/%E9%BB%84%E9%87%91%E5%8D%A1%403x.png',
				// 铂金卡
				'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/%E9%93%82%E9%87%91%E5%8D%A1%403x.png',
				// 钻石卡
				'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/%E9%92%BB%E7%9F%B3%E5%8D%A1%403x.png',
				// 黑金卡
				'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/%E9%BB%91%E6%99%B6%E5%8D%A1%403x.png',
				// 传奇卡
				'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/%E4%BC%A0%E5%A5%87%E5%8D%A1%403x.png',
			],
		};
	},
	onShow() {},
	onLoad() {
		this.uid = getApp().globalData.uid;

		this.getMbrDetails1();
		this.getMbrDetails();
	},

	methods: {
	
	
			
	
	
	
	
	
	
	
	
	
	
	
		certification() {
			
			
			
			uni.navigateTo({
				url: '../certification/certification',
			});
		},
		//
		async getMbrDetails(level = 0) {
			const res = await this.$u.post('api/user/member_level', {
				uid: this.uid,
				level: level,
			});
		
			
			this.current = res.data.level;
		},
		/* 获取会员详情 */
		async getMbrDetails1() {
			const res = await this.$u.post('api/user/member_level', {
				uid: this.uid,
				level: 1,
			});
			this.data = [res.data];
			const res2 = await this.$u.post('api/user/member_level', {
				uid: this.uid,
				level: 2,
			});
			this.data = [...this.data, res2.data];
			const res3 = await this.$u.post('api/user/member_level', {
				uid: this.uid,
				level: 3,
			});
			this.data = [...this.data, res3.data];
			const res4 = await this.$u.post('api/user/member_level', {
				uid: this.uid,
				level: 4,
			});
			this.data = [...this.data, res4.data];
			const res5 = await this.$u.post('api/user/member_level', {
				uid: this.uid,
				level: 5,
			});
			this.data = [...this.data, res5.data];
			const res6 = await this.$u.post('api/user/member_level', {
				uid: this.uid,
				level: 6,
			});
			this.data = [...this.data, res6.data];
			const res7 = await this.$u.post('api/user/member_level', {
				uid: this.uid,
				level: 7,
			});
			this.data = [...this.data, res7.data];
			this.data[0].url = this.list[0];
			this.data[1].url = this.list[1];
			this.data[2].url = this.list[2];
			this.data[3].url = this.list[3];
			this.data[4].url = this.list[4];
			this.data[5].url = this.list[5];
			this.data[6].url = this.list[6];

		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	width: 100vw;
	height: 100vh;
	overflow: scroll;
	background-color: #1b1b1b;

	/deep/ swiper {
		margin-top: -108rpx !important;
	}
	.bgc {
		background-color: #1b1b1b;
		.bgc1 {
			width: 750rpx;
			height: 172rpx;
			background: #870000;
			border-bottom-left-radius: 50%;
			border-bottom-right-radius: 50%;
		}
	}
	.info {
		width: 712rpx;
		height: 304rpx;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		margin: 0 auto;

		border-radius: 10rpx;
		padding: 42rpx 59rpx;
		.list {
			height: 60rpx;
			font-size: 60rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #ffffff;
			line-height: 60rpx;

			background: linear-gradient(-15deg, #ae7c35 0%, #e7c994 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		.list1 {
			width: 234rpx;
			height: 47rpx;
			line-height: 43rpx;
			text-align: center;
			border: 1rpx solid #ffffff;
			border-radius: 24rpx;

			font-size: 24rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #ffffff;
			margin-top: 23rpx;
		}
		.list2 {
			margin-top: 70rpx;
			display: flex;
			justify-content: space-between;
			.ew1 {
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #d6d6d7;
			}
			.ew2 {
				height: 23rpx;
				display: flex;
				align-items: center;
				image {
					width: 28rpx;
					height: 22rpx;
					margin-right: 8rpx;
				}
				text {
					height: 23rpx;
					line-height: 23rpx;
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #d6d6d7;
				}
			}
		}
	}
	.info1 {
		width: 710rpx;
		//height: 552rpx;
		margin: 0 auto;
		//background: #2d2e32;
		border-radius: 20rpx;
		//margin-top: 20rpx;
		//padding: 58rpx;
		margin: 50rpx;
		.data1 {
			display: flex;
			align-items: center;
			height: 24rpx;
			margin-bottom: 45rpx;
			image {
				width: 23rpx;
				height: 23rpx;
				margin-right: 22rpx;
			}
			text {
				height: 24rpx;
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #c8c9cc !important;
				line-height: 24rpx;
			}
		}
	}
}
</style>
